<template>
  <div class="have-shop">
    <ul class="cart-have-shop-list">
      <li v-for="(item,index) in cartList" :key="index">
        <van-checkbox v-model="item.checked" checked-color="#B10625" @click="amount(index)"></van-checkbox>
        <img :src="item.url" alt />
        <div class="info">
          <p class="title">{{item.title}}</p>
          <div class="detail">
            <p>尺寸：{{item.size}}</p>
            <p>颜色:{{item.color}}</p>
          </div>
          <p class="price">¥{{item.price}}</p>
        </div>
        <van-stepper v-model="item.num" />
      </li>
    </ul>
    <van-submit-bar :price="totalPrice" button-text="结算" :decimal-length="pointnum" v-if="show" @submit="gotobuy">
      <van-checkbox v-model="allchecked" checked-color="#B10625" @click="checkAll">已选({{totalnum}})</van-checkbox>
    </van-submit-bar>

    <van-submit-bar button-text="删除" :decimal-length="pointnum" v-if="!show" @submit="delate">
      <van-checkbox v-model="allchecked" checked-color="#B10625" @click="checkAll">已选({{totalnum}})</van-checkbox>
    </van-submit-bar>
    <van-overlay :show="delateShow" z-index="100">
      <div class="wrapper" @click.stop>
        <div class="detale-wrap">
          <p>确定要删除您选中的商品吗？</p>
          <div>
            <span @click="quxiaowrapper">取消</span>
            <b></b>
            <span @click="quxiaowrapper">确定</span>
          </div>
        </div>
      </div>
    </van-overlay>

    <hot-sell v-if="show"></hot-sell>
  </div>
</template>

<script>
import img from "@/assets/image/cart-onshop.png";
import HotSell from "@/components/Home/Cart/HotSell";
export default {
  props: {
    active: Boolean,
  },
  data() {
    return {
      allchecked: true,
      delateShow: false,
      cartList: [
        {
          url: img,
          title: "AICHEN爱妻空气炸锅-AF-001（2L）",
          size: "223.7",
          color: "heise",
          price: 19.8,
          num: 1,
          checked: true,
        },
        {
          url: img,
          title: "hhhhhhh",
          size: "223.7",
          color: "heise",
          price: 199,
          num: 1,
          checked: true,
        },
        {
          url: img,
          title: "lalalalalal",
          size: "223.7",
          color: "heise",
          price: 199.05,
          num: 1,
          checked: true,
        },
        {
          url: img,
          title: "xixixixixi",
          size: "223.7",
          color: "heise",
          price: 199,
          num: 1,
          checked: true,
        },
      ],
    };
  },
  mounted() {
    // this.$emit("message", this.allchecked);
    //  this.amount();
  },
  components: {
    HotSell,
  },
  methods: {
    amount(index) {
      // this.cartList[index].checked=this.cartList[index].checked
      let arr = [];
      this.cartList.forEach((item) => {
        if (item.checked === true) {
          arr.push(item.checked);
        }
      });
      //判断是否为全选
      if (arr.length === this.cartList.length) {
        this.allchecked = true;
      } else {
        this.allchecked = false;
      }
    },
    // 全选
    checkAll() {
      this.cartList.forEach((item) => {
        if (this.allchecked == true) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
    },
    //添加遮罩层
    delate() {
      this.cartList.forEach((item) => {
        if (item.checked == true) {
          this.delateShow = true;
        }
      });
    },
    //取消遮罩层
    quxiaowrapper() {
      this.delateShow = false;
    },
    //跳转结算页
    gotobuy(){
      //获取被选中得订单
      let shopArr=[]
      this.cartList.forEach((item)=>{
        if(item.checked==true){
          shopArr.push(item)
        }
      })
      localStorage.setItem('shop',JSON.stringify(shopArr))
      // console.log(JSON.stringify(shopArr))
      localStorage.setItem('totalnum',this.totalnum)
      localStorage.setItem('totalprice',this.totalPrice)

      this.$router.push('/readybuy')
    }
  },
  computed: {
    //变成删除按钮
    show() {
      if (this.active == false) {
        // this.allchecked = false;
        // this.checkAll();
        return false;
      } else {
        // this.allchecked = true;
        // this.checkAll();
        return true;
      }
    },
    //计算总价
    totalPrice() {
      let MoneyList = [];
      this.cartList.forEach((item) => {
        if (item.checked === true) {
          MoneyList.push(item);
        }
      });
      //总价置为0
      let add = 0;
      for (let index in MoneyList) {
        add += MoneyList[index].price * MoneyList[index].num;
      }
      return add * 100;
    },
    //计算总数
    totalnum() {
      let MoneyList = [];
      this.cartList.forEach((item) => {
        if (item.checked === true) {
          MoneyList.push(item);
        }
      });
      //价格置为0
      let total = 0;
      for (var i = 0; i < MoneyList.length; i++) {
        total += MoneyList[i].num;
      }
      return total;
    },
    //计算保留几位小数
    pointnum() {
      let point = String(this.totalPrice / 100).split(".");
      let pointarr = String(point[1]).split("").slice(0, 2);
      let num = 0;
      if (
        (pointarr[1] == "n" && pointarr[0] == "u") ||
        (pointarr[1] == "0" && pointarr[0] == "0")
      ) {
        num = 0;
      } else if (
        (pointarr[1] == 0 && pointarr[0] !== 0) ||
        pointarr.length === 1
      ) {
        num = 1;
      } else {
        num = 2;
      }
      return num;
    },
  },
};
</script>

<style lang="stylus" >
// 遮罩层
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .van-submit-bar__bar{
    z-index 10
  }

  .detale-wrap {
    height: 100px;
    width: 250px;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;

    p {
      height: 60px;
      border-bottom: 1px solid #ccc;
      font-weight: bold;
      line-height: 60px;
      text-align: center;
    }

    div {
      height: 40px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      color: #1989fa;

      span:nth-chlid(1) {
        font-weight: blod;
      }

      b {
        height: 100%;
        width: 1px;
        background: grey;
      }
    }
  }
}

.cart-have-shop-list {
  padding-top: 9px;

  li {
    position: relative;
    height: 121px;
    width: 100%;
    margin-bottom: 14px;
    padding: 17px 14px 15px 14px;
    display: flex;
    background: #fff;

    .van-checkbox {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
    }

    img {
      height: 72px;
      width: 52px;
      margin-top: 6px;
      margin-left: 49px;
    }

    .info {
      margin-left: 36px;
      width: 150px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: 13px;
        font-weight: bold;
        white-space: wrap;
      }

      .detail {
        font-size: 11px;
        color: #9897A6;
      }

      .price {
        color: #B30F2C;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .van-stepper {
      position: absolute;
      top: 93px;
      right: 14px;
    }
  }

  .van-stepper__input {
    margin: 0;
    border: 1px solid #b10625;
    background-color: #fff;
    color: #b10625;
    width: 46px;
    height: 24px;
  }

  .van-stepper__plus {
    background: #ffffff;
    border: 1px solid #b10625;
    border-left: none;
    border-radius: 0;
    color: #b10625;
    width: 24px;
    height: 24px;
  }

  .van-stepper__minus {
    background: #ffffff;
    border: 1px solid #b10625;
    border-right: none;
    border-radius: 0;
    color: #b10625;
    width: 24px;
    height: 24px;
  }

  .van-stepper__minus--disabled, .van-stepper__plus--disabled {
    border-color: #9291a1;
    color: #9291a1;
  }

  .van-stepper__minus::before, .van-stepper__plus::before {
    width: 7px;
  }

  .van-stepper__minus::after, .van-stepper__plus::after {
    height: 7px;
  }
}

.van-submit-bar {
  margin-bottom: 50px;

  .van-button--round {
    border-radius: 0;
    margin-right: -16px;
    background: #b10625;
  }

  .van-submit-bar__price {
    color: #b10625;
    font-size: 18px;
  }
}

.van-submit-bar:nth-child(2) {
  .van-submit-bar__bar {
    justify-content: space-between;
  }
}
</style>